﻿<div ngf-drop
     ngf-change="vm.fileChanged($files, $event)"
     ngf-accept="image/gif,image/jpeg,image/png,image/tiff,image/bmp,.tif"
     ngf-hide-on-drop-not-available="false"
     ngf-drag-over-class="{accept:'dragover-accepted', reject:'dragover-rejected'}"
     ng-show="vm.isEditMode"
     id="{{vm.modelName}}"
     name="{{vm.modelName}}"
     ng-model="vm.ngModel"
     class="dragarea">

    <img ng-if="vm.ngModel" 
         ngf-select
         ngf-change="vm.fileChanged($files, $event)"
         ngf-accept="'image/gif,image/jpeg,image/png,image/tiff,image/bmp,.tif'"
         ngf-reset-on-click="false"
         ng-src="{{vm.previewUrl}}" 
         class="img-polaroid selectable" 
         width="220" 
         alt="{{vm.ngModel.name}}" />

    <cms-progress-bar load-state="vm.loadState" ng-if="vm.ngModel && !vm.ngModel.isCurrentFile"></cms-progress-bar>

    <div>
        <button ng-if="!vm.ngModel"
                class="btn-icon" 
                ngf-select 
                title="{{vm.buttonText}}"
                type="button"
                ngf-change="vm.fileChanged($files, $event)"
                ngf-accept="'image/gif,image/jpeg,image/png,image/tiff,image/bmp,.tif'"
                ngf-reset-on-click="false"
                ng-disabled="vm.loadState.isLoading">
            <i class="fa fa-picture-o"></i>
        </button>
        <button ng-if="vm.ngModel"
                class="btn-icon image-upload-cog" 
                ngf-select 
                title="{{vm.buttonText}}"
                type="button"
                ngf-change="vm.fileChanged($files, $event)"
                ngf-accept="'image/gif,image/jpeg,image/png,image/tiff,image/bmp,.tif'"
                ngf-reset-on-click="false"
                ng-disabled="vm.loadState.isLoading">
            <i class="fa fa-cog"></i>
        </button>
        <button type="button"
                ng-if="vm.isRemovable"
                ng-click="vm.remove()"
                ng-disabled="vm.loadState.isLoading">
            Remove
        </button>
    </div>
    <div class="image-upload-info" ng-if="!vm.ngModel">Click the icon above or drag and drop a file here</div>
    <div class="image-upload-drop-info">Drop file here</div>
    <div class="image-upload-drop-rejected">This file is not valid</div>
</div>

<div ng-show="!vm.isEditMode">
    <img ng-src="{{vm.previewUrl}}" class="img-polaroid" width="220" alt="{{vm.ngModel.name}}" />
</div>